<template>
  <div>
    <tou/>
    <second/><br><br>
    <el-carousel indicator-position="outside" height="600px">
      <el-carousel-item v-for="item in 4" :key="item">
      </el-carousel-item>
    </el-carousel>
    <div>
      <h1>{{hotel.hotelName}}</h1>
      <h4>{{hotel.hotelInfo}}</h4>
      <div>
        <div style=" display:inline-block;background-color: darkturquoise;width: 600px;height: 250px;border-radius: 35px;">
            <div class="score">
              {{hotel.hotelScore}}
            </div>很棒<br><br>
          <div>
            <el-rate
              v-model="hotel.hotelScore"
              disabled
              show-score
              text-color="#ff9900"
            >{{hotel.hotelScore}}
            </el-rate>
          </div><br><br>
          <div>
            {{hotel.hotelComment}}
          </div><br>
          <div>
            {{hotel.hotelLebgth}}
          </div>
        </div>
      </div>
    </div>
    <br><br>
    <div>
      <span style="font-size: 25px;font-weight: 600">{{today}}</span>&nbsp;&nbsp;&nbsp;&nbsp;今天&nbsp;&nbsp;
      <div style="border-radius: 30px;background-color: #99a9bf;display: inline-block;width: 50px">1晚</div>&nbsp;&nbsp;
      <span style="font-size: 25px;font-weight: 600">{{tomorrow}}</span>&nbsp;&nbsp;&nbsp;&nbsp;明天
    </div><br><br>


    <div style="width: 1199px;margin: 0 auto" >
      <el-row>
        <el-col :span="4" v-for="(o, index) in beds" :key="o.bedId" :offset="(index)%5 == 0 ? 0 : 1" style="margin-top: 10px">
          <el-card :body-style="{ padding: '0px' }" >
            <img :src="o.bedPic" class="image" style="width: 180px;height: 160px;margin-left: 12px;margin-top: 10px">
            <div style="padding: 14px;">
              <span>{{o.bedName}}</span>
              <div class="bottom clearfix">

                <span class="time" style="margin-top: -10px">{{ o.bedInfo }}</span><br><br>
                <span class="time" style="margin-top: -10px">剩余房量:{{o.bedNum}}</span><br><br>

                <span class="time" style="color:#aa0000;font-size: 18px;margin-left:-65px;font-weight: 600">¥{{ o.bedPrice }}</span>

                <el-button v-if="o.bedNum==0" type="primary" icon="el-icon-circle-close" disabled="true" class="button" style="width: 80px;height: 30px">售罄</el-button>
                <el-button v-else type="primary" icon="el-icon-truck" class="button" @click="insertorder(o.bedName,o.bedPrice)" style="width: 80px;height: 30px">预订</el-button>

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>


  </div>

</template>

<script>
import Tou from "./tou.vue";
import Second from "./second.vue";

export default {
  name: "bed",
  components: {Second, Tou},
  data(){
    return{
      beds:[],
      today:'',
      tomorrow: '',
      hotel:{}

    }
  },
  created() {
    // 获取今天的日期
    const currentDate = new Date();
    this.today = (currentDate.getMonth()+1)+"月 -- "+currentDate.getDate()+"日";

    // 获取明天的日期
    const nextDay = new Date();
    this.tomorrow = (nextDay.getMonth()+1)+"月 -- "+(nextDay.getDate()+1)+"日";
  },
  methods:{
    findallbed(){
     var  id=localStorage.getItem("hotelId");
      this.$axios.get("/hotel/findhotelitem",{
        params:{
          hotelId:id
        }
      }).then(data=>{
        this.beds=data.data.data
      })
    },
    thishotel(){
      var  id=localStorage.getItem("hotelId");
      var cityid=localStorage.getItem("city");
      this.$axios.get("/hotel/findonehotel",{
        params:{
          cityId:cityid,
          hotelId:id
        }
      }).then(data=>{
        this.hotel=data.data.data
      })
    },
    insertorder(bedname,Price){
      this.$axios.get("/hotelorder/inserorder",{params:{
        hotelId:this.hotel.hotelId,
          bedname:bedname,
          Price:Price
        }}).then(data=>{
          if (data.data.code==200){
            this.$router.push("/hotelorder")
          }else {
            alert("添加失败")
          }
      })
    }
  },
  mounted() {
    this.findallbed()
    this.thishotel()
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}



.score{
  border-radius: 30px;
  display: inline-block;
  background-color:#3b99fc;
  color:white;width: 70px;
  height:35px;
  margin-top: 35px;
  line-height: 35px;
  font-weight: 600;
  font-size: 25px
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 300px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 300px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 300px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 300px;
}





.el-carousel__item:nth-child(3) {
  background-image: url("https://cbu01.alicdn.com/img/ibank/2016/633/890/2816098336_2119179195.jpg");
  background-size: cover;
}
.el-carousel__item:nth-child(4) {
  background-image: url("https://img.zcool.cn/community/0108d75be2a7c5a80121ab5d8e45e0.jpg@1280w_1l_2o_100sh.jpg");
  background-size: cover;
}
.el-carousel__item:nth-child(5) {
  background-image: url("https://img.zcool.cn/community/01a608591bf0c4a801216a3eceb086.jpg@1280w_1l_2o_100sh.jpg");
  background-size: cover;
}
.el-carousel__item:nth-child(6) {
  background-image: url("https://img.zcool.cn/community/01496c590ab077a80121455072259d.jpg@2o.jpg");
  background-size: cover;
}

</style>
